import { useContext } from 'react';
import BackButton from 'src/component/BackButton';
import { ThemeContext } from 'src/context/ThemeContext';
import { useSelector } from 'react-redux';
import { RootState } from 'src/redux/store'
import IcContactTelegram from 'src/image/ic-contact-telegram.svg';
import style from './ContactUs.module.scss';
import IcGAuth from 'src/image/ic-gauth.svg';
// import IcAndroid from 'src/image/ic-android.svg';
// import IcIos from 'src/image/ic-ios.svg';
const ContactUs = () => {
    const { IcContactEmail } = useContext(ThemeContext).image;
    const { baseDataInfo } = useSelector((rootState: RootState) => rootState.basedata);
    const { IcAndroid, IcIos } = useContext(ThemeContext).image;
    return (
        <div>
            <BackButton />
            <div className={style.head}>联络我们</div>
            <div className={style.content}>
                <div>
                    <img src={IcContactEmail} />
                    <div className={style.item}>
                        <div className={style.title}>電子信箱</div>
                        <a
                            className={style.link}
                            href={'mailto:' + baseDataInfo?.FEmail}
                            target="_blank"
                            rel="noreferrer"
                        >
                            {baseDataInfo?.FEmail}
                        </a>
                    </div>
                </div>
                <div className={style.divider} />
                <div>
                    <img src={IcContactTelegram} />
                    <div className={style.item}>
                        <div className={style.title}>Telegram</div>
                        <a className={style.link}
                            href={'https://t.me/' + baseDataInfo?.FTelegram}
                            target="_blank"
                            rel="noreferrer">
                            {baseDataInfo?.FTelegram}
                        </a>
                    </div>
                </div>
                <div className={style.divider} />
                <div className={style.downlink}>
                    <img src={IcIos} />
                    {/* <div className={style.bgicon1}></div> */}
                    <div className={style.item}>
                        <div className={style.link}
                            onClick={() => {
                                window.open(baseDataInfo?.FiOSUrl)
                            }}
                        >
                            下载 iOS App
                        </div>
                    </div>
                </div>
                <div className={style.divider} />
                <div className={style.downlink}>
                    <img src={IcAndroid} />
                    {/* <div className={style.bgicon2}></div> */}
                    <div className={style.item}>
                        <div className={style.link}
                            onClick={() => {
                                window.open(baseDataInfo?.FAndroidUrl)
                            }}
                        >
                            下载 Android App
                        </div>
                    </div>
                </div>
                <div className={style.divider} />
                <div className={style.downlink}>
                    <img src={IcGAuth} />
                    <div className={style.item}>
                        <div className={style.link}
                            onClick={() => (window.open(
                                'https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2',
                            ))}
                        >
                            下载 谷歌验证器 App
                        </div>
                    </div>
                </div>
                <div className={style.divider} />
            </div>
        </div>
    );
};

export default ContactUs;
